<template>
<h2>deom07-if01</h2>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">v-if、v-else</div>
    <div  class="zhtt-demo-card-body">
      <h2 v-if="condition01">这是v-if中的内容</h2>
      <h2 v-else>这是v-else中的内容</h2>
      <button class="zhtt-btn" @click="changeCondition01">切换变量布尔值</button>
    </div>
    <div class="zhtt-demo-card-footer">
      v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
    </div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">在template中控制一组</div>
    <div  class="zhtt-demo-card-body">
      <template v-if="condition01">
        <h3>这是v-if中的内容</h3>
        <p>这是v-if中的内容</p>
      </template>
      <template v-else>
        <div>这是v-else中的内容</div>
      </template>
      <button class="zhtt-btn" @click="changeCondition01">切换变量布尔值</button>
    </div>
    <div class="zhtt-demo-card-footer">
      使用template的好处是不会产生template的html节点
    </div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">v-else-if</div>
    <div  class="zhtt-demo-card-body">
      <div v-if="type === 'A'">A</div>
      <div v-else-if="type === 'B'">B</div>
      <div v-else-if="type === 'C'">C</div>
      <div v-else>Not A/B/C</div>
      <button class="zhtt-btn" @click="changeType">切换变量布尔值</button>
    </div>
    <div class="zhtt-demo-card-footer">
      v-else-if
    </div>
  </div>
</template>

<script>
export default {
  name: "deom07-if01",
  data(){
    return {
      condition01:true,
      type:'A'
    }
  },
  methods:{
    changeCondition01(){
      this.condition01 = !this.condition01;
    },
    changeType(){
      let num = Math.random();
      this.type = num>0.7?'A':num>0.4?'B':num>0.1?'C':'D';
    }
  }
}
</script>

<style scoped>

</style>